<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交易详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-pink-500 to-rose-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <button onclick="goBack()" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </button>
                <h1 class="text-lg font-semibold">交易详情</h1>
                <button onclick="shareTransaction()" class="text-white hover:opacity-80">
                    <i class="fas fa-share text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Transaction Status -->
        <div class="bg-white border-b border-gray-200">
            <div class="px-4 py-4 text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-check text-green-600 text-2xl"></i>
                </div>
                <h2 class="text-lg font-semibold text-gray-800 mb-1">交易成功</h2>
                <p class="text-sm text-gray-600 mb-3">您的账户收到了一笔资金</p>
                <p class="text-3xl font-bold text-green-600" id="transactionAmount">+¥1,298.00</p>
            </div>
        </div>

        <!-- Transaction Details -->
        <div class="bg-white border-b border-gray-200">
            <div class="px-4 py-4">
                <h3 class="font-medium mb-4">交易信息</h3>
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">交易类型</span>
                        <span class="text-sm font-medium" id="transactionType">订单收入</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">交易金额</span>
                        <span class="text-sm font-medium text-green-600" id="transactionAmountDetail">+¥1,298.00</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">交易时间</span>
                        <span class="text-sm" id="transactionTime">2025-01-05 10:32:15</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">交易单号</span>
                        <div class="flex items-center">
                            <span class="text-sm font-mono" id="transactionId">TX202501051032156</span>
                            <button onclick="copyTransactionId()" class="ml-2 text-pink-600 hover:text-pink-700">
                                <i class="fas fa-copy text-xs"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">关联订单</span>
                        <button onclick="viewOrder('202501050156')" class="text-sm text-pink-600 hover:text-pink-700">
                            <span id="relatedOrder">202501050156</span>
                            <i class="fas fa-external-link-alt text-xs ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Account Information -->
        <div class="bg-white border-b border-gray-200">
            <div class="px-4 py-4">
                <h3 class="font-medium mb-4">账户信息</h3>
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">收款账户</span>
                        <span class="text-sm">商家账户</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">余额变动</span>
                        <div class="text-right">
                            <p class="text-sm text-green-600 font-medium">+¥1,298.00</p>
                            <p class="text-xs text-gray-500">¥167,228.80 → ¥168,526.80</p>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">手续费</span>
                        <span class="text-sm">¥0.00</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">实际到账</span>
                        <span class="text-sm font-medium text-green-600">¥1,298.00</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Payment Details -->
        <div class="bg-white border-b border-gray-200">
            <div class="px-4 py-4">
                <h3 class="font-medium mb-4">支付详情</h3>
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">买家支付方式</span>
                        <div class="flex items-center">
                            <i class="fab fa-weixin text-green-600 mr-2"></i>
                            <span class="text-sm">微信支付</span>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">支付状态</span>
                        <span class="text-sm text-green-600">
                            <i class="fas fa-check-circle text-xs mr-1"></i>
                            已支付
                        </span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">支付时间</span>
                        <span class="text-sm">2025-01-05 10:30:42</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Commission Details -->
        <div class="bg-white border-b border-gray-200" id="commissionDetails">
            <div class="px-4 py-4">
                <h3 class="font-medium mb-4">费用明细</h3>
                <div class="space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">商品总价</span>
                        <span class="text-sm">¥1,336.00</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">平台佣金 (3%)</span>
                        <span class="text-sm text-red-600">-¥38.00</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm text-gray-600">商家实收</span>
                        <span class="text-sm font-medium text-green-600">¥1,298.00</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Notes -->
        <div class="bg-white">
            <div class="px-4 py-4">
                <h3 class="font-medium mb-3">备注信息</h3>
                <div class="bg-gray-50 rounded-lg p-3">
                    <p class="text-sm text-gray-600" id="transactionNotes">
                        此笔交易为正常订单收入，已扣除平台佣金，资金已到账可用于提现。
                        如有疑问请联系客服。
                    </p>
                </div>
            </div>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex gap-3">
                <button onclick="contactCustomerService()" class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                    <i class="fas fa-headset mr-2"></i>联系客服
                </button>
                <button onclick="downloadReceipt()" class="flex-1 bg-gradient-to-r from-pink-500 to-rose-500 text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity">
                    <i class="fas fa-download mr-2"></i>下载凭证
                </button>
            </div>
        </div>
    </div>

    <script>
        // Mock transaction data for different types
        const transactionTypes = {
            'order-income': {
                type: '订单收入',
                amount: '+¥1,298.00',
                status: 'success',
                statusText: '交易成功',
                statusIcon: 'fas fa-check',
                statusColor: 'green',
                time: '2025-01-05 10:32:15',
                relatedOrder: '202501050156',
                notes: '此笔交易为正常订单收入，已扣除平台佣金，资金已到账可用于提现。如有疑问请联系客服。',
                showCommission: true,
                originalAmount: '¥1,336.00',
                commission: '-¥38.00',
                paymentMethod: '微信支付',
                paymentIcon: 'fab fa-weixin'
            },
            'commission': {
                type: '平台佣金',
                amount: '-¥38.94',
                status: 'success',
                statusText: '扣费成功',
                statusIcon: 'fas fa-minus',
                statusColor: 'red',
                time: '2025-01-05 10:32:15',
                relatedOrder: '202501050156',
                notes: '根据平台规则收取的佣金费用，费率为3%，此费用已从订单收入中扣除。',
                showCommission: false
            },
            'withdrawal': {
                type: '提现',
                amount: '-¥10,000.00',
                status: 'success',
                statusText: '提现成功',
                statusIcon: 'fas fa-check',
                statusColor: 'blue',
                time: '2025-01-04 15:30:00',
                notes: '提现申请已处理完成，资金已转入您的银行账户，请注意查收。到账时间可能因银行处理时间而有所延迟。',
                showCommission: false,
                bankAccount: '工商银行尾号8866'
            }
        };

        // Get transaction type from URL or default to order-income
        function getTransactionType() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('type') || 'order-income';
        }

        // Initialize transaction details
        function initializeTransaction() {
            const transactionType = getTransactionType();
            const transaction = transactionTypes[transactionType];
            
            if (!transaction) return;

            // Update status section
            document.querySelector('.w-16.h-16 i').className = `${transaction.statusIcon} text-${transaction.statusColor}-600 text-2xl`;
            document.querySelector('.w-16.h-16').className = `w-16 h-16 bg-${transaction.statusColor}-100 rounded-full flex items-center justify-center mx-auto mb-3`;
            document.querySelector('h2').textContent = transaction.statusText;
            document.getElementById('transactionAmount').textContent = transaction.amount;
            document.getElementById('transactionAmount').className = `text-3xl font-bold text-${transaction.statusColor}-600`;

            // Update transaction details
            document.getElementById('transactionType').textContent = transaction.type;
            document.getElementById('transactionAmountDetail').textContent = transaction.amount;
            document.getElementById('transactionAmountDetail').className = `text-sm font-medium text-${transaction.statusColor}-600`;
            document.getElementById('transactionTime').textContent = transaction.time;
            document.getElementById('transactionNotes').textContent = transaction.notes;

            // Generate transaction ID
            const transactionId = 'TX' + transaction.time.replace(/[-:\s]/g, '').substring(0, 14) + Math.floor(Math.random() * 1000);
            document.getElementById('transactionId').textContent = transactionId;

            // Handle related order
            if (transaction.relatedOrder) {
                document.getElementById('relatedOrder').textContent = transaction.relatedOrder;
            } else {
                document.querySelector('[onclick*="viewOrder"]').parentElement.style.display = 'none';
            }

            // Handle commission details
            if (transaction.showCommission) {
                document.querySelector('[data-original-amount]')?.textContent = transaction.originalAmount;
                document.querySelector('[data-commission]')?.textContent = transaction.commission;
            } else if (transactionType === 'commission') {
                document.getElementById('commissionDetails').style.display = 'none';
            }

            // Handle payment method
            if (transaction.paymentMethod) {
                document.querySelector('.fab').className = transaction.paymentIcon + ' text-green-600 mr-2';
                document.querySelector('.fab').nextElementSibling.textContent = transaction.paymentMethod;
            }

            // Handle bank account for withdrawal
            if (transaction.bankAccount) {
                // Add bank account info
                const accountInfo = document.createElement('div');
                accountInfo.className = 'flex justify-between items-center';
                accountInfo.innerHTML = `
                    <span class="text-sm text-gray-600">到账银行</span>
                    <span class="text-sm">${transaction.bankAccount}</span>
                `;
                document.querySelector('[data-account-info]')?.appendChild(accountInfo);
            }
        }

        // Action functions
        function goBack() {
            // Always try to go back in history first
            if (window.history.length > 1) {
                window.history.back();
            } else {
                // Fallback to finance page if no history
                window.location.href = 'b2b-finance.html';
            }
        }

        function shareTransaction() {
            const transactionId = document.getElementById('transactionId').textContent;
            if (navigator.share) {
                navigator.share({
                    title: '交易详情',
                    text: `交易单号: ${transactionId}`,
                    url: window.location.href
                });
            } else {
                copyToClipboard(window.location.href);
                showToast('交易链接已复制');
            }
        }

        function copyTransactionId() {
            const transactionId = document.getElementById('transactionId').textContent;
            copyToClipboard(transactionId);
            showToast('交易单号已复制');
        }

        function viewOrder(orderId) {
            window.location.href = `order-detail.html?id=${orderId}`;
        }

        function contactCustomerService() {
            showToast('正在为您接入客服...');
            // In a real app, this would open customer service chat
        }

        function downloadReceipt() {
            showToast('正在生成交易凭证...');
            // In a real app, this would generate and download a receipt
        }

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).catch(() => {
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
            });
        }

        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            initializeTransaction();
        });
    </script>
</body>
</html>